<template>
  <div class="vip-detail">
    <!-- 头部 -->
    <div class="vip-info">
      <div class="app-main-top-box">
        <div class="title">商户详情</div>
      </div>
      <ul class="info-avatar">
        <li class="avatar">
          <img
            v-if="vipDetail.headImg != 'null'"
            :src="vipDetail.headImg"
            alt
          />
        </li>
        <li class="name-right">
          <div class="name">
            {{ vipDetail.customerName || "" }}
          </div>
        </li>
      </ul>

      <!-- 会员相关信息 -->
      <div class="info-content">
        <el-row type="flex">
          <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <ul class="member-info-container">
              <li>
                <div class="label">会员手机</div>
                <div class="value">{{ vipDetail.phone || "无" }}</div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- tab栏 -->
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="基础信息" name="info"
          >
		  <vip-info
            :active-name="activeName"
            :vip-detail="vipDetail"
            @getVipDetail="fetchData"/>
			</el-tab-pane>
        <el-tab-pane label="余额记录" name="balance"
          >
		  <balance-record
            ref="recordBalance"
            :active-name="activeName"
            :vip-detail="vipDetail"/>
		</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { pubDomainUserDetail } from "@/publicApi/publicDomain";
import { mapState } from "vuex";
import VipInfo from "./components/VipInfo";
import BalanceRecord from "./components/BalanceRecord.vue";
export default {
  components: {
    VipInfo,
    BalanceRecord,
  },
  data() {
    return {
      // 配置
      statusOption: ["无", "正常", "已过期", "已退卡"], // 卡状态
      activeName: "info", // tab栏默认显示
      // 状态
      loading: false,
      // 数据
      vipDetail: null,
      balanceCard: [
        { name: "总余额", value: 0 },
        { name: "实充余额", value: 0 },
        { name: "赠送余额", value: 0 },
      ],
      labelGroup: [], // 会员标签组
    };
  },

  mounted() {
    this.fetchData();
  },
  computed: {
    ...mapState({
      businessId: (state) => state.user.info.business.id,
    }),
  },

  methods: {
    // 获取会员信息
    fetchData() {
      let {
        $route: {
          query: { customerId },
        },
        businessId,
      } = this;
      pubDomainUserDetail({
        customerId,
        // businessId,
      }).then((res) => {
        if (res.code === 0) {
          this.vipDetail = res.data;
          this.loading = false;
        }
      });
    },

    /**
     *  按钮组
     */
    // 编辑信息
    openEditInfo() {
      this.$refs.editInfo.open(this.balanceCard).then(() => {
        this.fetchData();
      });
    },

    // 余额更改
    openEditBalance() {
      this.$refs.editBalance.open().then((res) => {
        // 刷新页面数据
        this.fetchData();
        if (this.activeName === "balance") {
          this.$refs.recordBalance.getAccountInfo();
          this.$refs.recordBalance.fetchData();
        }
      });
    },

    // 积分更改
    openEditPoints() {
      this.$refs.editPoints.open().then((res) => {
        // 刷新页面数据
        this.fetchData().then((res) => {
          if (this.activeName === "point") {
            this.$refs.pointsRecord.fetchData();
            this.$refs.pointsRecord.setCardData();
          }
        });
      });
    },

    // 更换卡
    openEditCardType() {
      this.$refs.editCardType.open().then((res) => {
        // 刷新页面数据
        this.fetchData();
        this.activeName = "info";
      });
    },

    // 更换标签
    openEditLabelType() {
      this.$refs.editLabelType.open().then(() => {
        // 刷新页面数据
        this.fetchData();
        console.log(this.activeName);
        if (this.activeName === "labelHistory") {
          this.$refs.labelHistory.fetchData();
        }
      });
    },

    // 送优惠券
    openGiftCoupon() {
      this.$refs.giftCoupon.open();
    },

    // 赠送卡券
    openGiftCardCoupon(version) {
      this.$refs.giftCardCoupon.open(version).then(() => {
        // 刷新页面数据
        this.fetchData();
        console.log(this.activeName);
        if (this.activeName === "couponIssue") {
          this.$refs.couponIssue.fetchData();
        }
      });
    },

    // 退卡
    openCancelCard() {
      this.$refs.cancelCard.open(this.balanceCard);
    },

    // 变更实体卡
    openEditEntityCard() {
      this.$refs.editEntityCard.open().then((res) => {
        this.fetchData();
      });
    },

    // 变更实体卡状态
    // editEntityCardStatus(status) {
    //   let str = "";
    //   let msg = "";
    //   if (status === 1) {
    //     str =
    //       "确定要挂失当前会员的实体卡? 挂失后对应实体卡的功能将会受限，积分、余额、折扣等所有功能将暂时不可用(不影响电子会员卡的使用)，解除挂失后卡片可正常使用。";
    //     msg = "挂失成功";
    //   } else if (status === 2) {
    //     str =
    //       "解除挂失后对应的实体卡片将可正常使用，请确定该卡片已被找回！点击确定按钮解除挂失！";
    //     msg = "解除挂失成功";
    //   } else if (status === 3) {
    //     str =
    //       "退卡后，实体卡所有功能失效(不影响电子会员卡的使用)，且退卡后只能通过绑新卡恢复。点击确定按钮完成退卡。";
    //     msg = "退卡成功";
    //   }
    //   this.$confirm(str, "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //     center: true,
    //     roundButton: true,
    //   })
    //     .then(() => {
    //       const params = {
    //         memberId: this.vipDetail.member.id,
    //         operationType: status,
    //       };
    //       this.loading = true;
    //       editEntityCardOps(params)
    //         .then((res) => {
    //           this.fetchData();
    //           this.$notify({
    //             title: "成功",
    //             message: msg,
    //             type: "success",
    //             duration: 2000,
    //             offset: 40,
    //           });
    //         })
    //         .catch((err) => {})
    //         .finally(() => {
    //           this.loading = false;
    //         });
    //     })
    //     .catch((err) => {});
    // },

    // 调整有效期
    openEditExpireTime() {
      this.$refs.editExpireTime.open().then((res) => {
        this.fetchData();
      });
    },

    // 切换tab栏
    handleTabClick(tab, event) {},
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.vip-detail {
  /* 会员资料 */
  .vip-info {
    padding: 24px 30px;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    .info-content {
      margin-left: 45px;
    }
    .info-avatar {
      height: 70px;
      margin-bottom: 15px;
      display: flex;
      li {
        margin-right: 10px;
      }
      .avatar {
        overflow: hidden;
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 1px solid #e7e7e7;
        border-radius: 50%;
      }
      .name-right {
        display: flex;
        flex-direction: column;
        .name {
          height: 30px;
          line-height: 30px;
          font-size: 18px;
          font-weight: bold;
          color: $dark-font-color;
        }
      }
      .label-tag {
        display: flex;
        .label {
          margin-left: 10px;
        }
      }
    }
  }
}

/* 会员信息列表 */
.member-info-container {
  font-size: 14px;
  li {
    display: flex;
    margin-bottom: 10px;
    word-break: break-all;
  }
  .label {
    flex: 0 0 80px;
    color: $light-font-color;
  }
  .value {
    color: $dark-font-color;
  }
}

::v-deep {
  .el-tabs__header {
    padding-left: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  .el-tabs__active-bar {
    height: 4px;
  }
}
</style>
